<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>学成网在线教育</title>
    <link rel="stylesheet" href="style.css"/>
    <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"/>
    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
</head>
<body class="index">
<!--搜索框部分-->
<div class="search-hd">
    <!--搜索框-->
    <div class="form">
        <nav>
            <div class="logo"><img src="images/logo_03.png" alt=""/></div><!--logo部分-->
            <div class="search">         <!--search部分-->
                <form action="">
                    <input type="text" name="" id=""placeholder="输入关键词" />   <!--占位符，内容输入自动清除默认值-->
                    <input type="submit" value=""/>
                </form>
            </div>
        </nav>
    </div>
</div>
<!--页面头部-->
<header>
    <nav>
        <div class="logo"><img src="images/logo_03.png" alt=""/></div><!--logo部分-->
        <div class="navbar">       <!--导航栏部分-->
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="personal">   <!--个人中心部分-->
        <a href="#">个人中心<img  class="ling" src="images/ling_03.png" alt=""/></a>
        <a href="#"><img class="hu" src="images/tx_03.png" alt=""/>胡歌</a>
        </div>
        <div class="search">         <!--search部分-->
            <form action="">
                <input type="text" name="" id=""placeholder="输入关键词" />   <!--占位符，内容输入自动清除默认值-->
                <input type="submit" value=""/>
            </form>
        </div>
    </nav>
</header>
<div class="banner">       <!--banner部分-->
 <div class="banner-in container">
     <div class="slidebar">      <!--侧边栏-->
         <ul>
             <li><a href="#">前端开发 <span> ></span></a></li>
             <li><a href="#">后端开发 <span> ></span></a></li>
             <li><a href="#">移动开发 <span> ></span></a></li>
             <li><a href="#">人工智能 <span> ></span></a></li>
             <li><a href="#">商业预测 <span> ></span></a></li>
             <li><a href="#">云计算&大数据 <span> ></span></a></li>
             <li><a href="#">运维&从测试 <span> ></span></a></li>
             <li><a href="#">UI设计 <span> ></span></a></li>
             <li><a href="#">产品 <span> ></span></a></li>
         </ul>
     </div>
     <div class="grid-col2 fl">
         <div class="focus fl">
             <!-- 左侧按钮 -->
             <a href="javascript:;" class="arrow-l">
                 &lt;
             </a>
             <!-- 右侧按钮 -->
             <a href="javascript:;" class="arrow-r"> > </a>
             <!-- 核心的滚动区域 -->
             <ul>
                 <li>
                     <a href="#"><img src="images/bgi_03.png" alt=""></a>
                 </li>
                 <li>
                     <a href="#"><img src="images/bgi_03.png" alt=""></a>
                 </li>
                 <li>
                     <a href="#"><img src="images/bgi_03.png" alt=""></a>
                 </li>
             </ul>
             <!-- 小圆圈 -->
             <ol class="circle">
             </ol>
         </div>
     </div>
     <dl class="timetable">         <!--小课表-->
         <dt>我的课程表</dt>
         <dd>
             <h4>继续学习 程序语言设计</h4>
             <p>正在学习-使用对象</p>
         </dd>
         <dd>
             <h4>继续学习 程序语言设计</h4>
             <p>正在学习-使用对象</p>
         </dd>
         <dd >
             <h4 id="three">继续学习 程序语言设计</h4>
             <p id="th">正在学习-使用对象</p>
         </dd>
         <dd><a href="#">全部课程</a></dd>
     </dl>
 </div>
</div>
<div class="recommend container middle"> <!--精品推荐-->
    <a href="">精品推荐</a>
    <a href="">JQuery  </a>
    <a href="">Spark </a>
    <a href="">MySQL </a>
    <a href="">JavaWeb</a>
    <a href="">MySQL</a>
    <a href="">JavaWeb</a>
    <a href="">修改兴趣</a>
</div>
<div class="recom-product container grid">   <!--精品推荐大模块-->
<div class="recom-hd">                <!-- 精品推荐大模块头部-->
    <h4>精品推荐</h4>
    <a href="#" class="check">查看全部</a>
</div>
    <div class="recom-bd">      <!--精品推荐大模块主体-->
    <ul >
        <li>
        <img src="images/tu-133.png" alt=""/>
        <h5>Think PHP 5.0 博客系统实战项目演练</h5>
        <p><span>高级</span>  •  1125人在学习</p>
        <div class="recom-logo"><img src="images/ad-164.png" alt=""/></div>     <!--精品推荐大模块主体logo-->
    </li>
        <li>
            <img src="images/ad-135.png" alt=""/>
            <h5>Android 网络图片加载框架详解</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            <div class="recom-logo"><img src="images/ad-165.png" alt=""/></div>     <!--精品推荐大模块主体logo-->
        </li>
        <li>
            <img src="images/ad-136.png" alt=""/>
            <h5>Angular 2 最新框架+主流技术+项目实战</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-137.png" alt=""/>
            <h5>Android Hybrid APP开发实战 H5+原生！</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-137.png" alt=""/>
            <h5>Android Hybrid APP开发实战 H5+原生！</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/tu-133.png" alt=""/>
            <h5>Think PHP 5.0 博客系统实战项目演练</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            <div class="recom-logo"><img src="images/ad-164.png" alt=""/></div>     <!--精品推荐大模块主体logo-->
        </li>
        <li>
            <img src="images/ad-135.png" alt=""/>
            <h5>Android 网络图片加载框架详解</h5>
            <p><span>高级</span>  •  1125人在学习</p>
            <div class="recom-logo"><img src="images/ad-165.png" alt=""/></div>     <!--精品推荐大模块主体logo-->
        </li>
        <li>
            <img src="images/ad-136.png" alt=""/>
            <h5>Angular 2 最新框架+主流技术+项目实战</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-137.png" alt=""/>
            <h5>Android Hybrid APP开发实战 H5+原生！</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-137.png" alt=""/>
            <h5>Android Hybrid APP开发实战 H5+原生！</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
    </ul>
    </div>
</div>
<div class="program container" id="program">               <!--编程入门部分-->
<div class="pro-hd">                   <!--编程入门头部-->
    <h4>编程入门</h4>
    <ul>
        <li><a href="#">热门</a></li>
        <li><a href="#">初级</a></li>
        <li><a href="#">中级</a></li>
        <li><a href="#">高级</a></li>
    </ul>
    <a href="#" class="check">查看全部</a>
</div>
<div class="pro-aside">                <!--编程入门侧边-->
    <img src="images/ad-138.png" alt=""/>
</div>
<div class="pro-nav">              <!--编程入门的快乐编程-->
    <img src="images/ad-139.png" alt=""/>
</div>
<div class="pro-bd">            <!--编程入门主体-->
    <ul>
        <li>
        <img src="images/ad-142.png" alt=""/>
        <h5>Android Hybrid APP开发实战 H5+原生！</h5>
        <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-143.png" alt=""/>
            <h5>Kami2首页界面切换效果     </h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-141.png" alt=""/>
            <h5>Unity Profiler入门  </h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-140.png" alt=""/>
            <h5>Cocos2d-x 引擎源码中的纹理优化 </h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
    </ul>
</div>
</div>
<div class="program container" id="data">               <!--数据分析师部分-->
    <div class="pro-hd">                   <!--数据分析师头部-->
        <h4>数据分析师</h4>
        <ul>
            <li><a href="#">热门</a></li>
            <li><a href="#">初级</a></li>
            <li><a href="#">中级</a></li>
            <li><a href="#">高级</a></li>
        </ul>
        <a href="#" class="check">查看全部</a>
    </div>
    <div class="pro-aside">                <!--数据分析师侧边-->
        <img src="images/ad-144.png" alt=""/>
    </div>
    <div class="pro-nav">              <!--编数据分析师的人工智能-->
        <img src="images/ad-145.png" alt=""/>
    </div>
    <div class="pro-bd">            <!--数据分析师主体-->
        <ul>
            <li>
                <img src="images/ad-143.png" alt=""/>
                <h5>Kami2首页界面切换效果</h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-142.png" alt=""/>
                <h5>Android Hybrid APP开发实战 H5+原生！          </h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-140.png" alt=""/>
                <h5>Cocos2d-x 引擎源码中的纹理优化   </h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-141.png" alt=""/>
                <h5>Unity Profiler入门        </h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
        </ul>
    </div>
</div>
<div class="robot container" id="robort">                              <!--机器学习工程师-->
<div class="robot-hd">                   <!--机器学习工程师头部-->
    <h4>机器学习工程师</h4>
    <ul>
        <li><a href="#">热门</a></li>
        <li><a href="#">初级</a></li>
        <li><a href="#">中级</a></li>
        <li><a href="#">高级</a></li>
    </ul>
    <a href="#" class="check">查看全部</a>
</div>
<div class="robot-bd">                     <!--机器学习工程师主体-->
    <ul>
        <li>
            <img src="images/ad-142.png" alt=""/>
            <h5>Android Hybrid APP开发实战 H5+原生！</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-140.png" alt=""/>
            <h5>Cocos2d-x 引擎源码中的纹理优化     </h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-141.png" alt=""/>
            <h5>Unity Profiler入门     </h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-146.png" alt=""/>
            <h5>微软人工智能-数据分析平台</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
        <li>
            <img src="images/ad-143.png" alt=""/>
            <h5>Kami2首页界面切换效果</h5>
            <p><span>高级</span>  •  1125人在学习</p>
        </li>
    </ul>   
</div>
</div>
<div class="robot container" id="front">                              <!--前端开发工程师-->
    <div class="robot-hd">                   <!--前端开发工程师头部-->
        <h4>前端开发工程师</h4>
        <ul>
            <li><a href="#">热门</a></li>
            <li><a href="#">初级</a></li>
            <li><a href="#">中级</a></li>
            <li><a href="#">高级</a></li>
        </ul>
        <a href="#" class="check">查看全部</a>
    </div>
    <div class="robot-bd">                     <!--前端开发工程师主体-->
        <ul>
            <li>
                <img src="images/ad-146.png" alt=""/>
                <h5>微软人工智能-数据分析平台</h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-141.png" alt=""/>
                <h5>Unity Profiler入门          </h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-140.png" alt=""/>
                <h5>Cocos2d-x 引擎源码中的纹理优化         </h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-143.png" alt=""/>
                <h5>Kami2首页界面切换效果</h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
            <li>
                <img src="images/ad-142.png" alt=""/>
                <h5>Android Hybrid APP开发实战 H5+原生！</h5>
                <p><span>高级</span>  •  1125人在学习</p>
            </li>
        </ul>
    </div>
</div>
<div class="man container">               <!--牛人推荐-->
<div class="man-hd">              <!--牛人推荐头部-->
    <h4>牛人推荐</h4>
</div>
<div class="man-bd">         <!--牛人推荐主体-->
    <ul>
        <li>
            <div>
                <h5>崔老师<span>Java EE</span></h5>
                <p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
                <div class="title"><img  src="images/ad-156.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
        <li>
            <div>
                <h5>汤老师<span>Java EE</span></h5>
                <p>JavaEE开发与教学多年，精通JavaEE技术体系，对流行框架JQuery、DWR、Struts1/2，</p>
                <div class="title"><img  src="images/ad-163.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
        <li>
            <div>
                <h5>毛老师<span>大数据</span></h5>
                <p>JAVA企业级应用专家、大数据实时处理技术领域专家。从事多年JAVAEE、大数据处理方向的……</p>
                <div class="title"><img  src="images/ad-162.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
        <li>
            <div>
                <h5>崔老师<span>Java EE</span></h5>
                <p>从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……</p>
                <div class="title"><img  src="images/ad-160.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
        <li>
            <div>
                <h5>王老师<span>大数据</span></h5>
                <p>多年JAVAEE开发及编码经验，主导多个项目开发，涉及电信、征信、电商等多个行业……</p>
                <div class="title"><img  src="images/ad-159.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
    </ul>
    <div class="key"><img src="images/ad-152.png" alt=""/></div>
    <ul class="second">
        <li class="recover">
            <div>
            <h5>闻老师<span>大数据</span></h5>
            <p>高级互联网软件工程师，曾担任某物流公司CRM开发团队TL。多年JAVAEE、大数据领域研发……</p>
                <div class="title"><img  src="images/ad-157.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
        <li>
            <div>
                <h5>汪老师<span>前端</span></h5>
                <p>高级软件架构师，全栈开发，多年大型项目管理经验。对Web Components、Node.js……</p>
                <div class="title"><img  src="images/ad-158.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
        <li>
            <div>
                <h5>江老师<span>前端</span></h5>
                <p>多年软件开发经验和教学经验，精通html，css，js,asp.net等编程语言和数据库系统……</p>
                <div class="title"><img  src="images/ad-161.png" alt=""/></div>              <!--牛人推荐主体小标题-->
            </div>
        </li>
    </ul>
</div>
</div>
<div class="bd-aside slider-bar">
    <ul>
        <li><a href="#program">编程入门</a></li>
        <li><a href="#data">数据分析师</a></li>
        <li><a href="#robort">机器学习工程师</a></li>
        <li><a href="#front">前端开发工程师</a></li>
        <li><a href="#">人工智能工程师</a></li>
        <li><a href="#">全栈工程师</a></li>
        <li><a href="#">IOS工程师</a></li>
        <li><a href="#">VR开发者</a></li>
        <li><a href="#">深度学习</a></li>
        <li><a href="#">商业预测分析师</a></li>
        <li><a href="#">Android开发工程师</a></li>
    </ul>
    <div class="goBack"><img src="images/17.png" alt=""/><br/>顶部</div>
</div>
<div class="footer">      <!--页面底部-->
    <div class="container footer-in">
        <div class="footer-l">        <!--页面底部左边-->
            <img src="images/ad-166.png" alt=""/>
            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            <a href="#">下载APP</a>
        </div>
        <div class="footer-r">          <!--页面底部右边-->
            <dl>
                <dt>关于学成网</dt>
                <dd><a href="#">关于</a></dd>
                <dd><a href="#">管理团队</a></dd>
                <dd><a href="#">工作机会</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>新手指南</dt>
                <dd><a href="#">如何注册</a></dd>
                <dd><a href="#">如何选课</a></dd>
                <dd><a href="#">如何拿到毕业证</a></dd>
                <dd><a href="#">学分是什么</a></dd>
                <dd><a href="#">考试未通过怎么办</a></dd>
            </dl>
            <dl class="last">
                <dt>合作伙伴</dt>
                <dd><a href="#">合作机构</a></dd>
                <dd><a href="#">合作老师</a></dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>